// 不是所有路由都应该被访问
// 静态路由可以一直被访问
// 动态路由得根据当前登录者的身份进行筛选
import { constantRoutes, asyncRoutes } from '@/router'
const state = {
  // 定义当前用户所拥有的路由权限
  routes: constantRoutes // 默认就应该有静态路由权限
}
const mutations = {
  // 更新路由的数据
  // newRoutes 是个动态值 登录人不同 newRoutes也不同
  setRoutes(state, newRoutes) {
    // 登录 就要获取新的路由 把它和静态路由进行合并
    state.routes = { ...constantRoutes, ...newRoutes } // 响应式更新
  }
}
const actions = {
  // 筛选路由  根据menus 筛选出可以访问的动态路由表 将他返回 同时提交mutations
  filterRoutes({ commit }, menus) {
    // 此时menus要和动态路由表匹配  => 得出匹配的路由表
    // asyncRoutes的结构是 => [{name:'..'},{name:'..'},{name:'..'}]
    const routes = []
    // 因为以 menus为基准
    menus.forEach(key => {
      // key就是一个标识
      routes.push(...asyncRoutes.filter(item => item.name === key))
      // 得到匹配的数组
    })
    // 得到的routes就是筛选之后的路由
    commit('setRoutes', routes) // 左侧菜单显示用的
    // 通过addRoutes 去添加到当前的路由表
    return routes // 调这个方法用的  动态路由添加
  }
}

// vuex的子模块
export default {
  namespaced: true,
  state,
  mutations,
  actions

}
